<template>
  <div class="charge-system">
    <div class="contentTopTitle">
      <div class="fl">
        <div class="title">收入日账</div>
      </div>
    </div>
    <div class="operation">
      <el-form :inline="true" :model="form" label-width="80px" class="formList">
        <el-form-item label="选择区域">
          <dx-cascader :area_id.sync="form.areaId" />
        </el-form-item>
        <el-form-item label="账期">
          <el-date-picker v-model="form.month" value-format="yyyyMM" type="month" placeholder="选择月"></el-date-picker>
        </el-form-item>
        <el-form-item label="是否税后">
          <el-switch
            v-model="form.isAfterTax">
          </el-switch>
          <el-button size="small" type="primary" style="margin-left: 12px" @click="submitHandle()">查询</el-button>
        </el-form-item>
        <el-form-item class="daochu">
          <el-button
            size="small"
            type="orange"
            @click="exportExcel()"
          >导出</el-button>
          <el-button
            size="small"
            type="orange"
            @click="plExportExcel()"
          >批量导出</el-button>
        </el-form-item>

      </el-form>
      <div class="tableBox">
        <el-table
          border
          stripe
          v-loading="tableLoading"
          :data="tableData"
          style="width:100%"
          class="tableTh28"
          height="73vh"
          :span-method="arraySpanMethod"
          ref="table"
        >
          <el-table-column fixed prop="dataSource" label="收入来源" width="80px"></el-table-column>
          <el-table-column fixed prop="class1" label="收入项" width="80px"></el-table-column>
          <el-table-column fixed prop="class2" label="收入面" width="100px"></el-table-column>
          <el-table-column fixed prop="indexName" label="产品项" width="100px">

          </el-table-column>
          <!-- <el-table-column fixed prop="total" label="月账" width="100px"></el-table-column> -->
          <el-table-column show-overflow-tooltip class-name="right-money" v-for="(item,index) in colList" :key="index"  :label="item.colnumName" >
                <el-table-column  :prop="'data'+index" :label="item.data" width="90px"></el-table-column>
                <el-table-column  :prop="index+'increase'" :label="item.increase" width="90px"></el-table-column>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import { $budgetAPI } from "@/api";
import { getSessionStorage } from "@/common/js/storage";
import {getCookie} from "@/common/js/cookie"
import {createSpanCharge,mergeSpan} from "@/utils/mixin"
import prefixAPI from "@/api/prefixAPI";


export default {
  data() {
    return {
      titleName: [],
      tableLoading: false,
      form: {
        areaId: "",
        month: "",
        isAfterTax:true,
      },
      tableData: [],
      colList:[],
      colnumName:[],
    };
  },
  created () {
    this.accountInfo = JSON.parse(getSessionStorage("accountInfo"));
    this.form.areaId = this.accountInfo.areaId;
    this.submitHandle();
    this.getMaxAcctMonthByDailyAccount()
  },
  methods: {
    submitHandle () {
      let areaId = this.form.areaId;
      let accMonth = this.form.month;
      let isAfterTax = this.form.isAfterTax;
      this.tableLoading = true;
      $budgetAPI.dailyAccountGetList2({
        areaId,
        accMonth,
        isAfterTax,
      },res => {
        this.tableLoading = false;
        if (res.code == 0) {
          res.content.dataList.map((item,index) =>{
            for(let i=0;i<31;i++){
               item['data'+i] = item.data[2*i]
               item[i+'increase'] = item.data[2*i+1]
            }
          })
          console.log(res);
          this.colList=res.content.colList
          // let result = this.createTableData(res.content.dataList);
          this.tableData = res.content.dataList;
           console.log(this.tableData)
          // this.spanArr = createSpanCharge(result,['incomeName','projectName','isProjectName','productName']);
          this.spanArr  = mergeSpan(this.tableData,['dataSource','class1','class2','indexName']);
          console.log(this.spanArr)
          console.log('mergeSpan',temp)

          setTimeout(() => {
            this.$refs.table.doLayout();
          },1200)
        }
      },err => {
        this.tableLoading = false;
      })
    },
    // 生成tableData数据
    createTableData (dataArr) {
      let result = dataArr.map((item,index) => {
        return {...item,...item.data}
      })
      return result
    },
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex == 0 || columnIndex == 1||columnIndex == 2||columnIndex == 3) {
        return this.spanArr[rowIndex][columnIndex]
      }
    },
    exportExcel() {
      let areaId = this.form.areaId
        ? this.form.areaId
        : this.accountInfo.areaId;
      let accMonth = this.form.month ? this.form.month : this.accountInfo.month;
      let isAfterTax = this.form.isAfterTax;
      let token = getCookie("token")
      if (process.env.NODE_ENV == "development") {
        window.location.href =
          prefixAPI.loc + "/api/dailySecondAccount/export?areaId=" + areaId + "&accMonth=" + accMonth +'&isAfterTax='+isAfterTax + "&token=" + token;
      } else if (process.env.NODE_ENV == "production") {
        window.location.href =
          prefixAPI.hp + "/api/dailySecondAccount/export?areaId=" + areaId + "&accMonth=" + accMonth +'&isAfterTax='+isAfterTax+ "&token=" + token;
      }
    },
    plExportExcel(){
      let areaId = this.form.areaId
        ? this.form.areaId
        : this.accountInfo.areaId;
      let isAfterTax = this.form.isAfterTax;
      let accMonth = this.form.month ? this.form.month : this.accountInfo.month;
      let token = getCookie("token")
      if (process.env.NODE_ENV == "development") {
        window.location.href =
          prefixAPI.loc + "/api/dailySecondAccount/exportBatch?areaId=" + areaId + "&accMonth="  + accMonth +'&isAfterTax='+isAfterTax + "&token=" + token;
      } else if (process.env.NODE_ENV == "production") {
        window.location.href =
          prefixAPI.hp + "/api/dailySecondAccount/exportBatch?areaId=" + areaId + "&accMonth=" +  accMonth + '&isAfterTax='+isAfterTax + "&token=" + token;
      }
    },
    getMaxAcctMonthByDailyAccount(){
      let areaId = this.form.areaId;
       $budgetAPI.getMaxAcctMonthByDailyAccount2( {
           areaId
         },
        res => {
           if (res && res.code == 0) {
              this.form.month=res.content;
              this.submitHandle();
           }
            },
            err => {

            }
          );
      }
  }
};
</script>

<style lang="scss">
.charge-system {
  .daochu {

    .el-form-item__content {
      float: right;
      width: 100%;
      .el-button {

      }
    }
  }
}
</style>
